<template>
  <div>
    <span>home组件</span><br />
    <el-button type="primary" @click="initEcharts">点击</el-button><br />
    <div id="echartsContainer" ref="echartsContainer"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      scoreArr: [],
      option: {}
    }
  },
  methods: {
    initEcharts (computed) {
      console.log(this.scoreArr)
      console.log(computed.getXAxis)
      const myEcharts = this.$echarts.init(this.$refs.echartsContainer)
      const option = {
        title: { text: '成绩图' },
        tooltip: {},
        legend: {
          data: ['分数']
        },
        xAxis: { data: computed.getXAxis },
        yAxis: {},
        series: [{
          name: '分数',
          type: 'bar',
          data: this.scoreArr
        }]
      }
      myEcharts.setOption(option)
    }
  },
  computed: {
    getXAxis () {
      const newArr = []
      this.scoreArr.forEach(item => {
        newArr.push(Object.keys(item)[0])
      })
      return newArr
    }
  },
  created () {
    const axiosGet = this.$http.get('/searchResult?userId=wangjian')
    axiosGet.then((res) => {
      // const newRes = JSON.parse(JSON.stringify(res.data.data))
      // console.log(newRes)
      console.log(res.data)
      this.scoreArr = res.data
    }, (reason) => {
      this.$message.error('请求失败！')
    })
  }
}
</script>
<style lang='less' scoped>
#echartsContainer {
  width: 600px;
  height: 400px;
}
</style>
